<template>
  <div id="item">
    <List item-layout="vertical">
      <ListItem v-for="item in data1" :key="item.title" style="height:170px" size="small">
        <ListItemMeta :title="item.positionname" :description="item.deviceAddress"/>
        入库数据:{{ item.upload_time }}<br> 数据时间:{{item.jcsj}}
        <template slot="action">
          <li>
            <Icon custom="iconfont iconeryanghualiu"/>
            {{ item.SO2 }}
          </li>
          <li>
            <Icon custom="iconfont iconeryanghuadan"/>
            {{ item.NO2 }}
          </li>
          <li>
            <Icon custom="iconfont iconcojiance"/>
            {{ item.CO }}
          </li>
          <li>
            <Icon custom="iconfont iconapp_icons--"/>
            {{ item.PM10 }}
          </li>
          <li>
            <Icon custom="iconfont iconicon-pm"/>
            {{ item.PM25 }}
          </li>
        </template>
      </ListItem>
    </List>
  </div>
</template>
<script>
export default {
  props: {
    'dbname': String
  },
  data () {
    return {
      columns1: [
        {
          title: '站点名称',
          fixed: 'left',
          align: 'center',
          key: 'positionname'
        },
        {
          title: '设备地址',
          align: 'center',
          key: 'deviceAddress'
        },
        {
          title: '入库时间',
          align: 'center',
          key: 'upload_time'
        },
        {
          title: '数据时间',
          align: 'center',
          key: 'jcsj'
        },
        {
          title: '站点编号',
          align: 'center',
          key: 'zdbh'
        },
        {
          title: 'SO2',
          align: 'center',
          key: 'SO2'
        },
        {
          title: 'NO2',
          align: 'center',
          key: 'NO2'
        },
        {
          title: 'CO',
          align: 'center',
          key: 'CO'
        },
        {
          title: 'O3',
          align: 'center',
          key: 'O3'
        },
        {
          title: 'PM10',
          align: 'center',
          key: 'PM10'
        },
        {
          title: 'PM25',
          align: 'center',
          key: 'PM25'
        }
      ],
      db: this.dbname,
      data1: []
    }
  },
  // 去map----config/index.js中改一个参数：productionSourceMap:false
  created () {
    this.getData()
    this.timer()
  },
  methods: {
    getData () {
      this.axios.get('http://192.168.131.89:8000/getrealdata/?dbname=' + this.db).then(response => {
        this.data1 = response.data
        // for (let i = 0; i < response.data.length; i++) {
        //   this.data1.splice(i, 1, response.data[i])
        // }
      }
      )
    },
    timer () {
      return setTimeout(() => {
        this.getData()
      }, 100000)
    },
    rowClassName (row, index) {
      if (index % 2 === 0) {
        return 'demo-table-info-row'
      } else {
        return 'demo-table-error-row'
      }
    }
  },
  watch: {
    data1 () {
      this.timer()
    }
  },
  destroyed () {
    clearTimeout(this.timer)
  }
}
</script>
<style scoped>
  #item{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    background: #fff;
    position: relative;
  }
</style>
